<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>props</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
</head>

<body>
  <!--准备好一个容器-->
  <div id="test"></div>
  <div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!--引入react核心库,核心库必须先引入-->
  <script type="text/javascript" src="./js/react.development.js"></script>
  <!--引入react-dom, 用于支持react操作DOM-->
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <!--引入babel,用于将jsx转为js-->
  <script type="text/javascript" src="./js/babel.min.js"></script>


  <script type="text/babel">


    //1.创建组件
      class Weather extends React.Component{

        //状态数据管理
      // state ={name:"邓紫棋",age:"30"} //state是直接在Weather实例对象上定义的属性

        render(){
            console.log(this)
            //外部传过来的值，放在了实例对象Weather的props身上
           //可以用解构赋值的写法
             const {name,age} =this.props
              return(
                     <ul>
                      <li>{name}</li>
                      <li>{age+2}</li>
                     </ul>
                    // <ul>
                    //   <li>{this.props.name}</li>
                    //   <li>{this.props.age}</li>
                    // </ul>
           
              )
        }
        
      }

    //渲染页面
    //通过组件从外部传进来的数据，放在了实例对象Weather的props身上，
     ReactDOM.render(<Weather name="邓紫棋" age={18}/>,document.getElementById("test"))
     ReactDOM.render(<Weather name="魏卫浩" age={18}/>,document.getElementById("test1"))
     ReactDOM.render(<Weather name="周杰伦" age={18}/>,document.getElementById("test2"))

     const p ={name:"刘德华",age:42}

     //原生里面不允许一...展开运算符中展开对象的，但是在react ，babel做了处理，就可以了
     //但是在react ，babel可以用展开运算符展开对象，但是只限制与标签属性的传递
     ReactDOM.render(<Weather {...p}/>,document.getElementById("test3"))




    </script>




</body>

</html>